import React from 'react';
import { createForm } from '@formily/core';
import { createSchemaField } from '@formily/react';
import {
  Form,
  FormItem,
  Input,
  Select,
  NumberPicker,
  Switch,
  Password,
  Radio,
  DatePicker,
  Submit,
  FormLayout,
  FormButtonGroup,
} from '@formily/antd-v5';
import { Card } from 'antd';

const SchemaField = createSchemaField({
  components: {
    FormItem,
    Input,
    Select,
    NumberPicker,
    Switch,
    Password,
    Radio,
    DatePicker,
    Card,
  },
});

// 动态表单配置
const schema = {
  type: 'object',
  properties: {
    basicInfo: {
      type: 'void',
      'x-component': 'Card',
      'x-component-props': {
        title: '基本信息',
        style: { marginBottom: 15 },
      },
      properties: {
        username: {
          type: 'string',
          title: '用户名',
          required: true,
          'x-decorator': 'FormItem',
          'x-component': 'Input',
          'x-validator': [
            { required: true, message: '请输入用户名' },
            { min: 3, message: '用户名至少3个字符' },
          ],
        },
        password: {
          type: 'string',
          title: '密码',
          required: true,
          'x-decorator': 'FormItem',
          'x-component': 'Password',
          'x-validator': [
            { required: true, message: '请输入密码' },
            { min: 6, message: '密码至少6个字符' },
          ],
        },
        userType: {
          type: 'string',
          title: '用户类型',
          required: true,
          'x-decorator': 'FormItem',
          'x-component': 'Radio.Group',
          enum: [
            { label: '学生', value: 'student' },
            { label: '教师', value: 'teacher' },
            { label: '管理员', value: 'admin' },
          ],
          'x-reactions': {
            dependencies: ['.userType'],
            fulfill: {
              state: {
                visible: true,
                schema: {
                  'x-validator': [{ required: true, message: '请选择用户类型' }],
                },
              },
            },
          },
        },
      },
    },
    additionalInfo: {
      type: 'void',
      'x-component': 'Card',
      'x-component-props': {
        title: '附加信息',
        style: { marginBottom: 15 },
      },
      properties: {
        department: {
          type: 'string',
          title: '所属部门',
          'x-decorator': 'FormItem',
          'x-component': 'Select',
          enum: [
            { label: '计算机系', value: 'cs' },
            { label: '数学系', value: 'math' },
            { label: '物理系', value: 'physics' },
          ],
          'x-reactions': {
            dependencies: ['.userType'],
            fulfill: {
              state: {
                visible: "{{$deps[0] === 'teacher' || $deps[0] === 'admin'}}",
                required: "{{$deps[0] === 'teacher'}}",
              },
            },
          },
        },
        studentId: {
          type: 'string',
          title: '学号',
          'x-decorator': 'FormItem',
          'x-component': 'Input',
          'x-reactions': {
            dependencies: ['.userType'],
            fulfill: {
              state: {
                visible: "{{$deps[0] === 'student'}}",
                required: "{{$deps[0] === 'student'}}",
              },
            },
          },
        },
        isActive: {
          type: 'boolean',
          title: '是否启用',
          default: true,
          'x-decorator': 'FormItem',
          'x-component': 'Switch',
        },
      },
    },
  },
};

const DynamicSchemaForm = () => {
  const form = createForm({
    validateFirst: true,
  });

  const onSubmit = (values) => {
    console.log('表单数据：', values);
  };

  return (
    <Form
      form={form}
      layout="vertical"
      onAutoSubmit={onSubmit}
      style={{ width: '600px', margin: '20px auto' }}
    >
      <FormLayout labelCol={6} wrapperCol={16}>
        <SchemaField schema={schema} />
        <FormButtonGroup.FormItem>
          <Submit block size="large">
            提交
          </Submit>
        </FormButtonGroup.FormItem>
      </FormLayout>
    </Form>
  );
};

export default DynamicSchemaForm; 